<template>
  <div class="page">
      <div class="admin_content clear" v-if="adminShow">
        <div class="Toinfo companyInfo clear">
          <div class="title">
            企业信息
          </div>
          <ul class="clear">
            <li>
              <div>
                <h3>账户余额(元)</h3>
                <p>{{homeData.usableAmt || "0"}}</p>
              </div>
            </li>
            <li>
              <div>
                <h3>企业可用积分</h3>
                <p>{{homeData.usableIntegral || "0"}}</p>
              </div>
            </li>
            <li>
              <div>
                <h3>员工数量</h3>
                <p>{{homeData.staffAmount || "0"}}</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="Echarts">
          <div class="title">
            数据概况
          </div>
          <div id="companyChart" :style="{width: '100%', height: '350px',padding:'25px 50px'}"></div>
        </div>
      </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {queryCompany} from '@/services/home'
import {RequestError} from '@/services/errors'
import {deepClone} from '@/utilities/object'
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require("echarts/lib/component/legend")
export default {
  name: 'home',
  data: () => ({
      adminShow:true,
      homeData:{},
      formFilter:{
          companyNo:""
      }
  }),
  computed: {
  },
  mounted() {
  },
  methods: {
    async loadData () {
      this.loading = true
      // 基于准备好的dom，初始化echarts实例
      var companyChart = echarts.init(document.getElementById('companyChart'))
      try {
        let data = await queryCompany(this.formFilter.companyNo);
        // console.log(data)
        this.homeData = data;
        this.$store.commit('compApplyChange',data.applyStatus)
        // debugger
        this.drawLine(companyChart);
      } catch (e) {
        if (e instanceof RequestError) {
          this.$alert(e.message, '提示', {
            type: 'error',
            confirmButtonText: '确定'
          })
        } else {
          throw e
        }
      }
      this.loading = false
    },
    drawLine(companyChart) {
      // 绘制图表
      companyChart.setOption({
          title : {
              text: '近一周员工消费'
          },
          tooltip : {
              trigger: 'axis'
          },
          legend: {
            data:['消费金额','消费积分']
          },
          toolbox: {
              show : true,
              feature : {
                  mark : {show: true},
                  dataView : {show: true, readOnly: false},
                  magicType : {show: true, type: ['line', 'line']},
                  restore : {show: true},
                  saveAsImage : {show: true}
              }
          },
          calculable : true,
          xAxis : [
              {
                  type : 'category',
                  data : this.homeData.dateList,
                  name:'日期',
                  nameLocation:'end',
                  nameTextStyle:{
                      fontSize:12,  
                      padding:10
                  }
              }
          ],
          yAxis : [
              {
                  type : 'value'
              }
          ],
          series : [
              {
                  name:'消费金额',
                  type:'line',
                  data:this.homeData.AmtList,
                  stack: '天',
                  itemStyle:{
                    normal:{
                        color:'#7ec9c2'
                    }
                  }
              },
              {
                  name:'消费积分',
                  type:'line',
                  data:this.homeData.IntegralList,
                  itemStyle:{
                    normal:{
                        color:'#45b1c2'
                    }
                  }
              }
          ]
      });
    }
  },
}
</script>

<style scope>
.clear:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.page>div .headline {
    text-align: center;
    font-size: 120px;
    font-weight: 300;
}
.page>div .text-content>h3 {
    text-align: center;
}
.page>div .text-content>h3 {
    font-weight: 300;
    font-size: 25px;
}
.admin_content{
  width: 100%;
  margin-top: 20px;
}
.title{
  width: 100%;
  color: #666666;
  line-height: 42px;
  font-size: 14px;
  border-bottom: 1px solid #f6f6f6;
  text-indent: 15px;
}
.Toinfo{
  width: 50%;
  float: left;
  box-sizing: border-box;
  border: 10px solid #f6f6f6;
  padding: 0 10px 10px 0;
}
.companyInfo{
  width: 100%;
}
.Toinfo ul li{
  float: left;
  width: 50%;
  border-radius: 2px;
}
.companyInfo ul li{
  width: 33%;
}
.Toinfo ul li div{
  display: block;
  padding: 10px 15px;
  background-color: #f8f8f8;
  color: #999;
  border-radius: 2px;
  margin: 10px 0 0 10px;
}
.Toinfo ul li h3{
  font-weight: 400;
  padding-bottom: 10px;
  font-size: 12px;
}
.Toinfo ul li p{
  font-size: 30px;
  color: #009688;
  line-height: 29px;
  width:200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hot ul li p{
  font-size: 14px;
}
.Toinfo ul .hot_ins{
  width: 100%;
}
.hot{
  border-left: 0;
}
.Echarts{
  float: left;
  width: 100%;
  margin: 0 0;
  box-sizing: border-box;
  border: 10px solid #f6f6f6;
  border-top: 0;
}
</style>
